<article class="component" id="calendar" data-url='calendar'>
  <h2 class="component-title">Calendar</h2>
  <p class="component-description">Calendar is a touch optimized component that provides an easy way to handle dates.</p>
  <p>Calendar can be created and initialized using JavaScript. We need to use related App's method:</p>

{% highlight js %}
$("#my-input").calendar();
{% endhighlight %}

  <p>A calendar will popup when user click the input, and the start date will be the value of input.</p>
  <p>You can use <code>data-toggle='date'</code> to init calendar if you don't want to write any JS code:</p>
{% highlight html%}
<input type="text" data-toggle='date' />
{% endhighlight %}

  <h2>Params</h2>
  <p>Let's look on list of all available parameters:</p>

  <table class="params-table">
    <thead>
      <tr>
        <th>Parameter</th>
        <th>Type</th>
        <th>Default</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th colspan="4">Common Picker Modal Component Parameters</th>
      </tr>
      <tr>
        <td>inputReadOnly</td>
        <td>boolean</td>
        <td>true</td>
        <td>Sets "readonly" attribute on specified input</td>
      </tr>
      <tr>
        <td>cssClass</td>
        <td>string</td>
        <td></td>
        <td>Additional CSS class name to be set on calendar modal</td>
      </tr>
      <tr>
        <td>closeByOutsideClick</td>
        <td>boolean</td>
        <td>true</td>
        <td>If enabled, picker will be closed by clicking outside of picker or related input element</td>
      </tr>
      <tr>
        <td>toolbar</td>
        <td>boolean</td>
        <td>true</td>
        <td>Enables calendar modal toolbar</td>
      </tr>
      <tr>
        <td>toolbarTemplate</td>
        <td>string</td>
        <td></td>
        <td>Toolbar HTML Template </td>
    </tr>
    <tr>
      <th colspan="4">Specific Calendar Parameters</th>
    </tr>
    <tr>
      <td>value</td>
      <td>array</td>
      <td></td>
      <td>Array with initial selected dates. Each array item represents selected date</td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>Date Range</td>
      <td></td>
      <td>Additonal disabled dates. Parameter accepts so called <b>Date Range</b> (look below for details)</td>
    </tr>
    <tr>
      <td>formatValue</td>
      <td>function (p, values)</td>
      <td></td>
      <td>Function to format input value, should return new/formatted string value. <b>values</b> is array where each item represents selected date</td>
    </tr>
    <tr>
      <td>monthNames</td>
      <td>array</td>
      <td>['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December']</td>
      <td>Array with full month names</td>
    </tr>
    <tr>
      <td>monthNamesShort</td>
      <td>array</td>
      <td>['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</td>
      <td>Array with short month names</td>
    </tr>
    <tr>
      <td>dayNames</td>
      <td>array</td>
      <td>['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</td>
      <td>Array with week day names</td>
    </tr>
    <tr>
      <td>dayNamesShort</td>
      <td>array</td>
      <td>['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</td>
      <td>Array with week day short names</td>
    </tr>
    <tr>
      <td>dateFormat</td>
      <td>string</td>
      <td>'yyyy-mm-dd'</td>
      <td>Default date format, available expressions:
        <ul>
          <li>'yyyy' - 4 digits year</li>
          <li>'yy' - 2 digits year</li>
          <li>'mm' - 2 digits month number, from 01 to 12</li>
          <li>'m' - month number, from 1 to 12</li>
          <li>'MM' - full month name</li>
          <li>'M' - short month name</li>
          <li>'dd' - 2 digits day number, from 01 to 31</li>
          <li>'d' - day number, from 1 to 31</li>
          <li>'DD' - full week day name</li>
          <li>'D' - short week day name</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>multiple</td>
      <td>boolean</td>
      <td>false</td>
      <td>Enable to allows select multiple dates/values</td>
    </tr>
    <tr>
      <td>rangePicker</td>
      <td>boolean</td>
      <td>false</td>
      <td>Enable to enable range picker. Not compatible with <code>multiple</code></td>
    </tr>
    <tr>
      <td>direction</td>
      <td>string</td>
      <td>'horizontal'</td>
      <td>Months layout direction, could be 'horizontal' or 'vertical'</td>
    </tr>
    <tr>
      <td>minDate</td>
      <td>Date</td>
      <td>null</td>
      <td>Minimum allowed date</td>
    </tr>
    <tr>
      <td>maxDate</td>
      <td>Date</td>
      <td>null</td>
      <td>Maximum allowed date</td>
    </tr>
    <tr>
      <td>touchmove</td>
      <td>boolean</td>
      <td>true</td>
      <td>If enabled then calendar months slides follow finger during touch move</td>
    </tr>
    <tr>
      <td>animate</td>
      <td>boolean</td>
      <td>true</td>
      <td>Enables transition between months</td>
    </tr>
    <tr>
      <td>closeOnSelect</td>
      <td>boolean</td>
      <td>false</td>
      <td>Enable and calendar will be closed when user pick a date</td>
    </tr>
  </tr>
  <tr>
    <td>yearPicker</td>
    <td>boolean</td>
    <td>true</td>
    <td>Enable year picker in toolbar</td>
  </tr>
</tr>
<tr>
  <th colspan="4">Callbacks</th>
</tr>
<tr>
  <td>onChange</td>
  <td>function (p, values, displayValues)</td>
  <td></td>
  <td>Callback function that will be executed when picker value changed. <b>values</b> and <b>displayValues</b> are arrays where each item represents value/display value of related column</td>
</tr>
<tr>
  <td>onMonthAdd</td>
  <td>function (p, monthContainer)</td>
  <td></td>
  <td>Callback function that will be executed when newly generated month HTML element will be added to calendar.</td>
</tr>
<tr>
  <td>onDayClick</td>
  <td>function (p, dayContainer, year, month, day)</td>
  <td></td>
  <td>Callback function that will be executed when user clicks/select any date</td>
</tr>
<tr>
  <td>onOpen</td>
  <td>function (p)</td>
  <td></td>
  <td>Callback function that will be executed when picker is opened</td>
</tr>
<tr>
  <td>onClose</td>
  <td>function (p)</td>
  <td></td>
  <td>Callback function that will be executed when picker is closed</td>
</tr>
</tbody>
</table>

<p>A <code>change</code> Event will triggered on input element when user selected date.</p>

<p>Use <a href='#datetime-picker' data-ignore='push'>DateTimePicker</a> if you want to select both date and time.</p>
</article>

<article class="component" data-url='calendar-inline'>
  <h2 class="component-title">Inline</h2>
  <p>If you init calendar on an div or other element instead of an input element, it will auto change to inline mode.</p>
  {% highlight html%}
  <div data-toggle='date' />
    {% endhighlight %}
  </article>
